<template>
  <div>
    <slot name="toolbar"></slot>
  </div>
  <div class="table-box">
    <el-table
      :data="tableDataByPage"
      style="width: 100%"
      :border="border"
      :stripe="stripe"
      :row-key="rowKey"
      :header-row-style="{
        color: '#ffffff',
        fontWeight: 'bold',
        height: '55px',
      }"
      :header-cell-style="{
        borderTop: '1px solid #374151',
        background: 'rgba(69, 106, 158, 0.1)',
      }"
      :row-style="{ background: '#0f172a', color: 'rgba(255,255,255,0.8)', height: '55px' }"
      @selection-change="handleSelectionChange"
      ref="tbRef"
    >
      <slot></slot>
    </el-table>
  </div>
  <div class="page-box" v-if="hasPage">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="page_size"
      :page-sizes="[10, 15, 20, 25, 30]"
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import { getPageData } from '@/utils/func/funcs'
import type { TableInstance } from 'element-plus'
import { computed, ref } from 'vue'

interface Props {
  tableData: any[]
  count?: number
  border?: boolean
  stripe?: boolean
  rowKey?: string
  tableHeight?: number
  hasPage?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  border: true,
  stripe: true,
  count: 0,
  tableData: () => [],
  rowKey: 'id',
  tableHeight: 480,
  tableTitle: '',
  hasPage: true,
})

interface Emits {
  (e: 'loadPageData', page: number, page_size: number): void
  (e: 'handleSelectionChange', rows: any[]): void
}
const emit = defineEmits<Emits>()
const tbRef = ref<TableInstance>()
// 清空选择
const clearSelection = () => {
  tbRef.value?.clearSelection()
}
// 获取选择行
const getSelectionRows = () => {
  return tbRef.value?.getSelectionRows()
}
defineExpose({ clearSelection, getSelectionRows })
const tableDataByPage = computed(() => {
  return props.count > 0 ? props.tableData : caculateTable.value
})
const page = ref(1)
const page_size = ref(10)
const total = computed(() => {
  return props.count > 0 ? props.count : props.tableData.length
})
const caculateTable = computed(() => {
  return getPageData(props.tableData, page.value, page_size.value)
})
const handleSizeChange = (val: number) => {
  page_size.value = val
  if (props.count > 0) {
    emit('loadPageData', page.value, page_size.value)
  }
}
const handleCurrentChange = (val: number) => {
  page.value = val
  if (props.count > 0) {
    emit('loadPageData', page.value, page_size.value)
  }
}
const handleSelectionChange = (rows: any[]) => {
  emit('handleSelectionChange', rows)
}
</script>
<style lang="scss" scoped>
.page-box {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  height: 45px;
  justify-content: flex-start;
  padding: 5px;
  background: var(--nav-bar-background);
}
</style>
